<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>课堂练习</title>
		<style>
			body {
				margin: 0px;
			}
			
			#container {
				width: 100%;
				height: 600px;
				background-color: aliceblue;
			}
			
			#row1 div {
				float: left;				
			}
			#row1 img{
				width: 90px;
				height: 90px;
			}
			#row1 div:first-child{
				width: 10%;
			}
			#row1 div:last-child{
				width: 90%;
			}
		</style>
	</head>

	<body>
		<!--最外层的div换分-->
		<div id="container">
			<div id="row1">
				<div>
					<img src="img/book1.jpg"/>
				</div>
				<div>
					<span><font>在HTML页面布局时，不需要通过设置各元素的横坐标、纵坐标来确定元素的位置，而是通过浮动的形式，采用常规文档流的方式自动的排列各元素。也就是说，排列的依据是各元素在文档中的先后顺序，采取从上到下、从左到右的方式自动排列；对于块级元素要换行排列，对于行级元素，在同一行中水平排列。
</font></span>
				</div>
			</div>

		</div>
	</body>

</html>